<template>
  <div>
    <el-upload
      :action="uploadUrl"
      list-type="picture-card"
      :file-list="fileList"
      :on-exceed="handleExceed"
      :limit="1"
      :on-success="handleSuccess"
      >
        <i slot="default" class="el-icon-plus" v-show="fileList.length == 0"></i>
        <div slot="file" slot-scope="{file}">
          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
          >
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
  export default {
    props: {
      type: {
        type: String,
      }
    },
    data() {
      return {
        uploadUrl: this.$url.uploadUrl,
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        fileList: [],
      };
    },
    mounted() {
      //this.initImg();
    },
    methods: {
      /**
       * 初始化图片
       */
      initImg(url) {
        this.fileList.push({
          url: url
        })
      },
      handleRemove(file) {
        console.log(file);
        this.fileList = [];

      },
      handleExceed(files, fileList) {
          debugger;
        this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      handleSuccess(res) {
        
        console.log(this.fileList);
        console.log(this.type, res.fileName);
        let data = {
          type: this.type, 
          fileUrl: res.fileName
        };
        this.$emit('savefileFun', data);
      }
    }
  }
</script>
<style scoped>
  
</style>
